<template>
  <div class="app">
    <el-card shadow="hover">
      <template #header>
        <h3>xxx管理系统</h3>
      </template>

      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        label-position="left"
        require-asterisk-position="right"
      >
        <!-- prop="name"  这个表单 采用rules中哪个规则校验-->
        <el-form-item label="用户名" prop="loginname">
          <el-input v-model="ruleForm.loginname" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>

        <el-form-item>
          <!--ruleFormRef 当前el-form组件对象  -->

          <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
          <!--ruleFormRef 当前el-form组件对象  -->
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'

// 引入 组件库中定义的接口
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

// 自己的定义接口-- 描述 表单数据对象的 类型
interface RuleForm {
  loginname: string
  password: string
}

// 导入interface和请求函数
import { loginRequest, type IUserLoginReBody } from '@/api/userAPI'
import { useRouter } from 'vue-router'
const router = useRouter()
//获取 表单 el-form组件实例
const ruleFormRef = ref<FormInstance>()
// 表单数据对象
const ruleForm = reactive<RuleForm>({
  loginname: '',
  password: '',
})
//rules 做表单验证的对象--这个对象传入到el-form组件的rules属性
const rules = reactive<FormRules<RuleForm>>({
  // 用户名的校验规则
  loginname: [
    // 数组中一个对象就是一个校验规则
    {
      // 必填
      required: true,
      // 提示内容
      message: '请输入用户名',
      // 触发：失焦焦点
      trigger: 'blur',
    },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    {
      //正则校验
      pattern: /^.{3,32}$/,
      message: '用户名必须是3-32位的字符',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change',
    },
  ],
  // region: [
  //   {
  //     required: true,
  //     message: 'Please select Activity zone',
  //     trigger: 'change',
  //   },
  // ],
})
// 点击提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  // formEl.validate  校验表单的内容是否 否个 rules中规则
  await formEl.validate(async (valid, fields) => {
    // valid 校验结果
    console.log(valid)
    //返回的校验不通过的字段
    console.log(fields)
    if (valid) {
      console.log('submit!')
      // 调用登录接口
      const obj: IUserLoginReBody = { adminname: ruleForm.loginname, password: ruleForm.password }
      const r = await loginRequest(obj)
      console.log(r)
      // r.data
      if (r.data.code == '200') {
        //登录成功
        localStorage.setItem('mall-b-token', r.data.data.token)
        // 弹出提示--调用弹框函数--引入elementPlus的全局样式
        // import "element-plus/dist/index.css";
        ElMessage.success(r.data.message)
        // 跳转
        router.push('/home')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 重置表单的方法
const resetForm = (formEl: FormInstance | undefined) => {
  // 判断组件对象存在
  if (!formEl) return
  // 调用组件实例上的重置方法
  formEl.resetFields()
  // ruleFormRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.app {
  background-image: url('@/assets/image/bg.jpg');
  height: 100%;
  width: 100%;
  display: flex;

  .el-card {
    width: 500px;
    height: 400px;
    margin: auto;
  }
}
</style>
<style>
/*
  需求：想要一个 elementPlus 内置组件的样式
    1-找api文档，没有属性 控制这个样式
    2-全局样式，问题：会影响页面的这个组件
*/
/* .el-form-item__label {
  color: red;
} */
</style>
<style scoped>
/* 深度选择器 */
:deep(.el-form-item__label) {
  /* color: red; */
  display: flex;
  justify-content: space-between;
}
</style>
